<template>
	<view class="szmd_page">
		<view class="top">
			<image @click="returnPage" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/4.png" mode="" class="back"></image>
			<view class="title">数字门店</view>
			<view class=""></view>
			<!-- <image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/5.png" mode="" class="fenxian"></image> -->
		</view>
		<view class="swiper_box">
			<swiper class="swipers" autoplay interval="3000" duration="1000" circular>
				<swiper-item v-for="(item, index) in swiper" :key="index"><image :src="Config_ysy.cosurl + item" mode="scaleToFill"></image></swiper-item>
			</swiper>
		</view>
		<view class="detail_box">
			<view class="price_box">
				<view class="price">￥{{goodes_detail.price}}</view>
				<view class="biao">
					<view class="ti">数字门店</view>
					<view class="tis">{{goodes_detail.title}}</view>
				</view>
				<view class="fbiao">{{goodes_detail.subtitle}}</view>
			</view>
			<view class="goods_intradus">
				<view class="industry_title">产品详情</view>
				<view class="goods-detail" v-html="content(goodes_detail.content)"></view>
			</view>
		</view>
		<view class="bot_btn">
			<view class="qy_btn" @click="doss()">电子签名</view>
			<view class="gm" v-if="shows" @click="bindGm">立即购买</view>
			<view class="gm" v-if="showss" @click="toJj">下一步</view>
		</view>
		<view class="erm" v-if="tips" @click="bindGms">
			<view class="eject-window">
			    <image :src="zf_ewm" mode=""></image>
				<view class="tip">请使用微信扫一扫支付</view>	
				<view class="tip" style="color: #EE0A24;">（付完款请点击下一步进行进件操作!）</view>	
			</view>
		</view>
			<!-- <view class="imgs"><image class="img" :src="img1" mode="widthFix" style="margin: 0px 24px;"></image></view> -->
			<catSignature canvasId="canvas1" @close="close" @save="save" :visible="isShow" />
		</view>
</template>

<script>
	import catSignature from '@/components/dzqm/dzqm.vue';
	export default {
		components: {
				catSignature
		},
		data() {
			return {
				swiper:[],
				token:'',
				shop_id:null,
				goodes_detail:{},
				zf_ewm:'https://jialianxin.cn/addons/epay/api/qrcode?text=weixin://wxpay/bizpayurl?pr=waMdgxRzz',
				tips:false,
				shows:true,
				showss:false,
				isShow: false,
				img1:'',
				user_id:'',
				seller_ids:null,
				space_values:null
			};
		},
		onLoad(option) {
			this.token=option.token
			this.shop_id=option.shop_id
			// this.getLb()
			this.getData()
		},
		methods:{
			returnPage(){
				uni.navigateBack({
					delta:1
				})
			},
			content(str){
			      var content = str.replace(/<img/g, '<img style="max-width:100%;height:auto;display:block"').replace(/\\/g, '')
			      return content;
			},
			doss() {
				this.isShow = true;
			},
			close() {
				this.isShow = false;
			},
			save(val) {
				this.isShow = false;
				this.img1 = this.$refs.hello.signImage;
				// console.log('微信小程序产生的',this.img1);
			},
			getData(){
				let url='/api/store/store/product_details';
				let params={}
				this.Unfold_data.tea_data(params, 'POST', url, res => {
					if(res.data.code==1){
						this.goodes_detail=res.data.data
						this.swiper=res.data.data.images1
					}else{
						this.Unfold_data.showWindow(res.data.msg);
					}
				})
			},
			bindGm(){
				this.tips=true
				var url = '/api/usercenter/user';
				let params = {
					token:this.token,
				};
				this.Unfold_data.upload_datas(params, 'POST', url, res => {
					if (res.statusCode == 200 && res.data.code == 1) {
						this.user_id = res.data.data.id;
						let url1='/api/store/store/product_neworder'
						let params1={
							id:this.goodes_detail.id,
							user_id:this.user_id
						}
						this.Unfold_data.tea_data(params1, 'POST', url1, res => {
							if(res.data.code==1){
								let order=res.data.data
								this.space_values=res.data.data.id
								this.seller_ids=res.data.data.shop_id
								console.log(this.seller_ids)
								let url2='/api/wxscanpay/wxsmpay'
								let params2={
									user_id:this.user_id,
									shop_id:order.shop_id,
									no:'Saas_SZMD_'+order.id,
									title:order.productname,
									money:this.goodes_detail.price
								}
								this.Unfold_data.ewm_data(params2, 'POST', url2, res => {
									if(res.data.code==1){
										this.zf_ewm=res.data.data.code_url
									}else{
										this.Unfold_data.showWindow(res.data.msg);
									}
								})
							}else{
								this.Unfold_data.showWindow(res.data.msg);
							}
						})
					}else{
						this.Unfold_data.showWindow(res.data.msg);
					}
				})
				
				
			},
			bindGms(){
				this.tips=false
				this.shows=false
				this.showss=true
			},
			toJj(){
				var url = '/api/usercenter/user';
				let params = {
					token:this.token,
				};
				this.Unfold_data.upload_datas(params, 'POST', url, res => {
					if (res.statusCode == 200 && res.data.code == 1) {
						this.user_id = res.data.data.id;
						var url4 = '/api/payment/pay/changePay';
						let runType = this.user_id + ":购买数字门店商品";
						let params4 = {
							run_type: runType,
							order_id:this.space_values,
							orderwx: "SaaS_SZMD_" + this.space_values
						}
						this.Unfold_data.shop_ajax(params4, 'POST', url4, res => {
							if (res.statusCode == 200 && res.data.code == 1) {
								if (res.data.msg == "订单已经支付") {
									  let url5='/api/store/store/completeWxsmPay'
									  let params5={
										  orderid:this.space_values
									  } 
									  this.Unfold_data.shop_ajax(params5, 'POST', url5, res => {
										  if(res.data.code==1){
											 
										  }else{
											  this.Unfold_data.showWindow(res.data.msg);
										  }
									  })
									 uni.navigateTo({
									 	url:'./jinjian?token='+this.token+'&shop_id='+this.seller_ids+'&user_id='+this.user_id+'&money='+this.goodes_detail.price+'&shop_turnover='+this.goodes_detail.price+'&space_name='+this.goodes_detail.title+'&space_value='+this.space_values
									 })	
								}else{
									this.shows=true
									this.showss=false
									this.Unfold_data.showWindow('检查到客户未支付');
								}
							} else {
								this.Unfold_data.showWindow(res.data.msg);
							}
						});
						
					  }else{
						this.Unfold_data.showWindow(res.data.msg);
					  }
					})	 
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.szmd_page{
	width: 750upx;
	.top{
		width: 750upx;
		height: 167upx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 80upx 30upx 20upx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		.back{
			width: 50upx;
			height: 36upx;
		}
		.title{
			font-size: 30upx;
			color: #323334;
			font-weight: 700;
		}
		.fenxian{
			width: 40upx;
			height: 40upx;
		}
	}
	.swiper_box{
		width: 750upx;
		margin-top: 167upx;
		.swipers{
			height: 500upx;
			image{
				width: 750upx;
				height: 500upx;
			}
		}
	}
	.detail_box{
		width: 750upx;
		.price_box{
			width: 100%;
			background-color: #FFFFFF;
			padding: 30upx;
			.price{
				font-size: 40upx;
				color: #E02020;
			}
			.biao{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 30upx;
				.ti{
					width: 90upx;
					height: 35upx;
					background: #E02020;
					border-radius: 8upx;
					text-align: center;
					line-height: 35upx;
					color: #FFFFFF;
					font-size: 20upx;
				}
				.tis{
					font-size: 36upx;
					font-family: SourceHanSansCN-Medium;
					color: #181818;
					margin-left: 10upx;
				}
				
			}
			.fbiao{
				font-size: 25upx;
				color: #929292;
				margin-top: 25upx;
			}
		}
		.goods_intradus{
			width: 750upx;
			background-color: #FFFFFF;
			margin-top: 20upx;
			.industry_title{
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34upx;
				color: #000000;
				padding-top: 20upx;
				font-weight: 700;
			}
			.goods-detail{
				margin-top: 20upx;
			}
		}
	}
	.bot_btn{
		width: 750upx;
		height: 140upx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:0 20upx;
		.qy_btn{
			width: 298upx;
			height: 76upx;
			background: #E02020;
			border-radius: 55upx;
			text-align: center;
			line-height: 76upx;
			color: #FFFFFF;
			font-size: 30upx;
		}
		.gm{
			width: 298upx;
			height: 76upx;
			background: #E02020;
			border-radius: 55upx;
			text-align: center;
			line-height: 76upx;
			color: #FFFFFF;
			font-size: 30upx;
		}
	}
	.erm{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000000;
		opacity: 0.9;
		z-index: 100;
		.eject-window{
			position: fixed;
			top: 40%;
			left: 0;
			right: 0;
			margin: auto;
			width: 560upx;
			height: 600upx;
			background-color:#FFFFFF;
			border-radius: 20upx;
			z-index: 111;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			image{
				width: 340upx;
				height: 320upx;
				border-radius: 10upx;
			}
			.tip{
				font-size: 25upx;
				margin-top: 20upx;
				color: #333333;
				font-weight: bold;
			}
		}
	}
}
</style>
